<template>
    <div class="flow-operation">
        <workflowBpmn ref="workflowBpmn" @destroyed="handleSetIsBack" />
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref, nextTick } from 'vue'
    import { onBeforeRouteLeave } from 'vue-router'
    import workflowBpmn from './components/workflowBpmn.vue'

    export default defineComponent({
        name: 'FlowOperation',
        components: {
            workflowBpmn
        },
        setup() {
            // 是否允许离开
            let isBack = ref<boolean>(false)
            const workflowBpmn = ref()
            // 允许离开
            const handleSetIsBack = () => {
                isBack.value = true
            }

            onBeforeRouteLeave((_to, _from, next: Function) => {
                nextTick(() => {
                    if (workflowBpmn.value.handleCheckBack() || isBack.value) {
                        next()
                        return
                    }
                    workflowBpmn.value.handleGOBack()
                })
            })

            return {
                handleSetIsBack,
                workflowBpmn
            }
        }
    })
</script>

<style lang="less" scoped>
    .flow-operation {
        position: relative;
        width: 100%;
        height: 100%;
    }

    //隐藏BPMN编辑器左下角LOGO
    :deep(.bjs-powered-by) {
        display: none;
    }
</style>
